<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>个人中心</title>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <base href="http://localhost/campus/">
    <link rel="shortcut icon" href="static/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="static/css/person.css"/>
    <script src="static/js/jquery.min.js"></script>
    <script src="layui/layui.js" charset="utf-8"></script>
</head>
<body>
<div class="layui-fluid">
    <jsp:include page="/pages/common/header.jsp"/>

    <%--主体内容--%>
    <div class="layui-row center">
        <div class="layui-col-xs2 layui-col-sm2 layui-col-md2">
            <div class="center_category" style="background: #797979;">
                <ul class="layui-nav layui-nav-tree layui-inline" lay-shrink="all"
                    style="background: #797979">
                    <li class="layui-nav-item">
                        <a href="person/update" style="background: #797979;">修改信息</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="person/myRelease?curPage=1" style="background: #797979;">我的发布</a>
                    </li>
                    <li class="layui-nav-item layui-this">
                        <a href="javascript:;" style="background: #797979;">我的收藏</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="person/myOrder" style="background: #797979;">我的订单</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="layui-col-xs10 layui-col-sm10 layui-col-md10">
            <div class="person_body" style="display: block;">
                <div class="favorite_nav">
                    <button class="layui-btn layui-btn-sm layui-btn-normal" style="float: left;"
                            onclick="selectAll(true)">全选
                    </button>
                    <button class="layui-btn-sm layui-btn layui-btn-normal" style="float: left;"
                            onclick="selectAll(false)">全不选
                    </button>
                    <button class="layui-btn-sm layui-btn layui-btn-warm" style="float: right;" onclick="buy()">去结算
                    </button>
                    <button class="layui-btn-sm layui-btn layui-btn-danger" style="float: right;"
                            onclick="cancelFavorite2()">删除
                    </button>
                </div>
                <div class="favorite_body">
                    <c:if test="${favorites.size() == 0}">
                        <div style="width: 100%;margin-top: 24px;text-align: center;">
                            <img src="static/img/noData.svg" style="width: 120px;height: 120px;"/>
                            <p style="line-height: 24px;margin-top:20px;color: #2E2D3C;font-size: 20px;">您还没有收藏的商品，
                            <a href="product/list" style="color: deepskyblue;">去首页</a></p>
                        </div>
                    </c:if>
                    <form id="cancelForm" action="person/cancelFavorite2" method="post">
                        <c:forEach items="${favorites}" var="favorite" varStatus="status">
                            <p style="display: none" class="favoriteProductState">${favorite.productState}</p>
                            <div class="favorite_item">
                                <div style="width: 100%;height: 8%;">
                                    <input title="" type="checkbox" name="favoriteIds" value="${favorite.id}">
                                </div>
                                <img src="${favorite.productPojo.img}" alt="" onclick="click_Item(${status.index})">
                                <div class="favorite_item_inner"
                                     style="width: 60%">
                                    <p style="color:red;font-size: 13px;">${favorite.productPojo.price}</p>
                                    <p>${favorite.productPojo.name}</p>
                                    <p>${favorite.productPojo.stringReleaseTime}</p>
                                </div>
                                <div class="favorite_item_inner" style="width: 40%;">
                                    <div id="favorite_btn_${status.index}" class="favorite_btn"
                                         onclick="cancelFavorite('${status.index}','${favorite.id}','${favorite.productPojo.id}')">
                                        <i class="layui-icon" style="color:red;font-size: 20px;"
                                           isCancel="1">&#xe68f;</i>
                                    </div>
                                    <div class="favorite_state"
                                         style="background: ${favorite.productState == 0 ? "green": favorite.productState == 1 ? "orange" : "red"}">
                                            ${favorite.productState == 0 ? "售卖中": favorite.productState == 1 ? "已下架" : favorite.productState == 2? "已售出" : "已删除"}
                                    </div>
                                </div>
                            </div>
                        </c:forEach>
                    </form>
                </div>
                <div style="width: 100%;height: 10%;text-align: center;position: absolute;top:86%;">
                    <div id="favorite_page"></div>
                </div>
            </div>
        </div>
    </div>


    <%@include file="/pages/common/footer.jsp" %>
</div>
<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;

        //…
    });

    var layer = null;
    layui.use('layer', function () {
        layer = layui.layer;
        let backMessage = '${sessionScope.backMessage}';
        if (backMessage !== "") {
            backMessage = JSON.parse(backMessage);
            let icon = backMessage.success === true ? 1 : 2;
            layer.msg(backMessage.message, {
                icon: icon
                , time: 2000
            });
            <%
            session.removeAttribute("backMessage");
            %>
        }
    });

    layui.use('laypage', function () {
        var laypage = layui.laypage;

        //执行一个laypage实例
        laypage.render({
            elem: 'favorite_page' //注意，这里的 test1 是 ID，不用加 # 号
            , count: ${favorites[0].favoriteProductsNum} //数据总数，从服务端得到
            , curr: ${curPage}
            , limit: 16
            , jump: function (obj, first) {
                //首次不执行
                if (!first) {
                    window.location.href = "http://localhost/campus/person/myFavorite?curPage=" + obj.curr
                }
            }
        });
    });

    function click_Item(index) {
        let checkedInput = $(":checkbox")[index];
        let isChecked = $(checkedInput).prop("checked");
        if (isChecked) {
            $(checkedInput).prop("checked", false);
        } else {
            $(checkedInput).prop("checked", true);
        }
    }

    function cancelFavorite(index, favoriteIds, productId) {
        let i = $('#favorite_btn_' + index).children('i')[0];
        let isCancel = parseInt($(i).attr("isCancel"));
        if (isCancel !== 1) {
            favoriteIds = productId;
        }
        $.ajax({
            type: "POST"
            , url: "http://localhost/campus/person/cancelFavorite"
            , data: "favoriteIds=" + favoriteIds + "&isCancel=" + isCancel
            , success: function (res) {
                let icon = res.success ? 1 : 2;
                layer.msg(res.message, {
                    icon: icon
                    , time: 2000
                });
                if (res.success) {
                    if (parseInt(res.data.isCancel) !== 1) {
                        $('#favorite_btn_' + index).html('<i class="layui-icon" style="color:red;font-size: 24px;" isCancel="' + res.data.isCancel + '">&#xe68c;</i> ');
                    } else {
                        window.location.reload();
                    }
                }
            }
        });
    }

    function buy() {
        let isHas = false;
        let isCanPurchase = true;

        if (${sessionScope.user.realName==null || sessionScope.user.realName.equals("")}) {
            layer.msg("请先到个人中心进行实名再进行购买", {
                icon: 3
                , time: 2000
            });
            return false;
        }

        let favoriteProductState = $(".favoriteProductState");

        $(":checkbox").each(function (index) {
            let isChecked = $(this).prop("checked");
            if (isChecked) {
                isHas = true;
                let id = $($(favoriteProductState)[index]).text();
                if (id !== "0") {
                    isCanPurchase = false;
                }
            }
        });

        if (!isCanPurchase) {
            layer.msg("含有不在售卖中的商品", {
                icon: 2
                , time: 2000
            });
            return false;
        }

        if (isHas && isCanPurchase) {
            let form = $("#cancelForm");
            $(form).attr("action", "order/confirm");
            $(form).submit();
        } else {
            layer.msg("请先选择商品", {
                icon: 2
                , time: 2000
            })
        }
    }

    function cancelFavorite2() {
        let isHas = false;
        $(":checkbox").each(function () {
            let isChecked = $(this).prop("checked");
            if (isChecked) {
                isHas = true;
                return false;
            }
        });

        if (isHas)
            $("#cancelForm").submit();
        else {
            layer.msg("请先选择商品", {
                icon: 2
                , time: 2000
            })
        }
    }

    function selectAll(isAll) {
        if (isAll) {
            $(":checkbox").each(function () {
                $(this).prop("checked", "checked");
            })
        } else {
            $(":checkbox").removeAttr("checked");//取消全选
        }
    }


</script>
</body>
</html>
